<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>电商平台--登录页面</title>

    <!-- 外部资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="./css/webbase2.css"/>
    <!-- 自定义 Tailwind 配置 -->
    <link rel="stylesheet" type="text/css" href="./css/top-nav-optimized.css"/>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#86909C',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                },
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .input-focus {
                @apply focus:ring-2 focus:ring-primary/30 focus:border-primary focus:outline-none transition-all duration-200;
            }
            .btn-primary {
                @apply bg-primary hover:bg-primary/90 text-white font-medium py-2.5 px-4 rounded-lg transition-all duration-200 transform hover:scale-[1.02] active:scale-[0.98];
            }
        }
    </style>
</head>

<body class="bg-gray-50 min-h-screen flex flex-col">
<!-- 顶部导航 -->
<div id="app" class="sticky top-0 z-50 bg-white shadow-sm">
    <top></top>
</div>

<!-- 主要内容区 -->
<main class="flex-grow flex items-center justify-center p-4 md:p-8">
    <div id="loginApp" class="w-full max-w-md">
        <div class="text-center mb-8">
            <h1 class="text-[clamp(1.8rem,5vw,2.5rem)] font-bold text-gray-800 mb-2">登录账户</h1>
            <p class="text-gray-500">请选择您的登录身份</p>
        </div>

        <!-- 登录卡片 -->
        <div class="bg-white rounded-xl shadow-md overflow-hidden transform transition-all duration-300 hover:shadow-lg">
            <!-- 身份选择标签 -->
            <div class="flex border-b">
                <button
                        class="flex-1 py-3 px-4 text-center font-medium transition-colors duration-200"
                        :class="selectedRole === 'user' ? 'text-primary border-b-2 border-primary' : 'text-gray-500 hover:text-gray-700'"
                        @click="selectedRole = 'user'"
                >
                    <i class="fa fa-user mr-2"></i>普通用户
                </button>
                <button
                        class="flex-1 py-3 px-4 text-center font-medium transition-colors duration-200"
                        :class="selectedRole === 'merchant' ? 'text-primary border-b-2 border-primary' : 'text-gray-500 hover:text-gray-700'"
                        @click="selectedRole = 'merchant'"
                >
                    <i class="fa fa-briefcase mr-2"></i>商家
                </button>
            </div>

            <!-- 登录表单 -->
            <form @submit.prevent="login" class="p-6 md:p-8 space-y-5">
                <!-- 错误提示 -->
                <div v-if="msg" class="text-red-500 text-sm text-center py-2 px-4 bg-red-50 rounded-lg transition-all duration-300">{{ msg }}</div>

                <!-- 用户名输入 -->
                <div>
                    <label for="username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
                    <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                <i class="fa fa-user"></i>
                            </span>
                        <input
                                type="text"
                                id="username"
                                v-model="form.username"
                                placeholder="请输入用户名"
                                class="w-full pl-10 pr-3 py-2.5 border border-gray-300 rounded-lg input-focus"
                                :class="{'border-red-500': errors.username}"
                                @blur="validateField('username')"
                        >
                        <span v-if="errors.username" class="absolute inset-y-0 right-0 flex items-center pr-3 text-red-500">
                                <i class="fa fa-exclamation-circle"></i>
                            </span>
                    </div>
                    <p v-if="errors.username" class="mt-1 text-xs text-red-500">{{ errors.username }}</p>
                </div>

                <!-- 密码输入 -->
                <div>
                    <label for="password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                    <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                <i class="fa fa-lock"></i>
                            </span>
                        <input
                                :type="showPassword ? 'text' : 'password'"
                                id="password"
                                v-model="form.password"
                                placeholder="请输入密码"
                                class="w-full pl-10 pr-10 py-2.5 border border-gray-300 rounded-lg input-focus"
                                :class="{'border-red-500': errors.password}"
                                @blur="validateField('password')"
                        >
                        <button
                                type="button"
                                class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-gray-700"
                                @click="showPassword = !showPassword"
                        >
                            <i class="fa" :class="showPassword ? 'fa-eye-slash' : 'fa-eye'"></i>
                        </button>
                    </div>
                    <p v-if="errors.password" class="mt-1 text-xs text-red-500">{{ errors.password }}</p>
                </div>

                <!-- 记住我 & 忘记密码 -->
                <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2">
                    <label class="flex items-center cursor-pointer">
                        <input type="checkbox" class="h-4 w-4 text-primary border-gray-300 rounded focus:ring-primary/30">
                        <span class="ml-2 text-sm text-gray-600">记住我</span>
                    </label>
                    <div class="text-sm">
                        <a href="#" class="text-primary hover:underline transition-colors duration-200">忘记密码？</a>
                        <span class="mx-2 text-gray-400">|</span>
                        <a href="admin_login.html" class="text-primary hover:underline transition-colors duration-200" >管理员登录</a>
                    </div>
                </div>

                <!-- 登录按钮 -->
                <button
                        type="submit"
                        class="w-full btn-primary flex items-center justify-center gap-2"
                        :disabled="isLoading"
                >
                    <span v-if="isLoading"><i class="fa fa-spinner fa-spin"></i></span>
                    <span>登录</span>
                </button>

                <!-- 注册引导 -->
                <div class="text-center text-sm text-gray-600 pt-2">
                    <template v-if="selectedRole === 'user'">
                        还没有账号？<a href="/register.html" class="text-primary hover:underline font-medium">立即注册</a>
                    </template>
                </div>
            </form>
        </div>
    </div>
</main>

<!-- 页脚 -->
<footer class="mt-8 py-6 text-center text-sm text-gray-500 border-t border-gray-200">
    © 2025 ShopEasy 电商平台，保留所有权利。
</footer>

<!-- 脚本引入 -->
<script src="./js/axios.min.js"></script>
<script src="./js/common.js"></script>
<script src="./js/vue.js"></script>
<script src="./js/top.js"></script>

<!-- Vue 实例 -->
<script>
    // 顶部导航组件实例
    new Vue({
        el: "#app"
    });

    // 登录表单实例
    new Vue({
        el: "#loginApp",
        data: {
            form: {
                username: '',
                password: ''
            },
            selectedRole: 'user', // 默认选择普通用户
            msg: '',
            errors: {},
            showPassword: false,
            isLoading: false,
            util
        },
        methods: {
            // 验证单个字段
            validateField(field) {
                this.errors[field] = '';

                if (field === 'username' && !this.form.username.trim()) {
                    this.errors[field] = '请输入用户名';
                }

                if (field === 'password') {
                    if (!this.form.password) {
                        this.errors[field] = '请输入密码';
                    }
                }
            },

            // 验证所有字段
            validateForm() {
                const errors = {};

                if (!this.form.username.trim()) {
                    errors.username = '请输入用户名';
                }

                if (!this.form.password) {
                    errors.password = '请输入密码';
                }

                this.errors = errors;
                return Object.keys(errors).length === 0;
            },

            // 登录处理
            login() {
                // 表单验证
                if (!this.validateForm()) {
                    return;
                }

                // 清空之前的错误消息
                this.msg = '';
                this.isLoading = true;

                // 创建包含选择的role的请求数据
                const requestData = {
                    ...this.form,
                    role: this.selectedRole // 根据选择的角色设置role值
                };

                axios.post("/users/login", requestData)
                    .then(response => {
                        const { token, ...user } = response;
                        sessionStorage.setItem("token", token);
                        util.store.set("user-info", user);

                        // 根据角色跳转到不同页面
                        let url;
                        if (this.selectedRole === 'merchant') {
                            // 商家登录后跳转页面（留给您自己设置）
                            url = '/merchant/dashboard.html'; // 示例路径，您可以修改为实际路径
                        } else {
                            // 普通用户登录后跳转页面（保持原有逻辑）
                            url = util.store.get("return-url") || '/';
                        }

                        window.location = url;
                    })
                    .catch(error => {
                        this.msg = error.response?.message || '用户名或密码有误！';
                    })
                    .finally(() => {
                        this.isLoading = false;
                    });
            }
        }
    });
</script>
</body>
</html>
